<template>
  <div class="fix fee-main">
    <div class="fl lf-content">
      <div class="tree">
        <div class="tr-content">
          <div class="tr-title">
            目录<span class="add-title">添加</span>
          </div>
          <div class="line"></div>
          <div class="tr-tree-list">
            <ul>
              <li>
                <div class="fix tr-list treeHead1" style="padding-left: 20px;">
                  <div class="fl text ell">{{menu1}}</div>
                  <div class="fix addBtn showBtn">
                    <div class="fr add">添加下级</div>
                    <div class="fr down"><i class="iconfont icon-fold"></i></div>
                    <div class="fr up"><i class="iconfont icon-unfold"></i></div>
                    <div class="fr delBtn"><i class="iconfont icon-delete"></i></div>
                  </div>
                </div>
                <ul>
                  <li>
                    <div class="fix tr-list treeHead2" style="padding-left: 40px;">
                      <div class="fl text ell">二级菜单1-1</div>
                      <div class="fix addBtn showBtn">
                        <div class="fr add">添加下级</div>
                        <div class="fr down"><i class="iconfont icon-fold"></i></div>
                        <div class="fr up"><i class="iconfont icon-unfold"></i></div>
                        <div class="fr delBtn"><i class="iconfont icon-delete"></i></div>
                      </div>
                    </div>
                    <ul>
                      <li>
                        <div class="fix tr-list treeHead3" style="padding-left: 60px;">
                          <div class="fl text ell">三级菜单1-1-1</div>
                          <div class="fix addBtn showBtn">
                            <div class="fr add">添加下级</div>
                            <div class="fr down"><i class="iconfont icon-fold"></i></div>
                            <div class="fr up"><i class="iconfont icon-unfold"></i></div>
                            <div class="fr delBtn"><i class="iconfont icon-delete"></i></div>
                          </div>
                        </div>
                        <ul>
                          <li>
                            <div class="fix tr-list treeHead3" style="padding-left: 80px;">
                              <div class="fl text ell">四级菜单1-1-1-1</div>
                              <div class="fix addBtn showBtn">
                                <div class="fr add">添加下级</div>
                                <div class="fr down"><i class="iconfont icon-fold"></i></div>
                                <div class="fr up"><i class="iconfont icon-unfold"></i></div>
                                <div class="fr delBtn"><i class="iconfont icon-delete"></i></div>
                              </div>
                            </div>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
            <ul>
              <li>
                <div class="fix tr-list treeHead1" style="padding-left: 20px;">
                  <div class="fl text ell">菜单2222</div>
                  <div class="fix addBtn showBtn">
                    <div class="fr add">添加下级</div>
                    <div class="fr down"><i class="iconfont icon-fold"></i></div>
                    <div class="fr up"><i class="iconfont icon-unfold"></i></div>
                    <div class="fr delBtn"><i class="iconfont icon-delete"></i></div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="lf-footer">
        <div class="ft-conp">
          删除的费用类型
        </div>
      </div>
    </div>
    <div class="fr fr-content">
      <div class="cost-all-list">
        <div class="cost-head fix">
          <div class="fl head-nav">菜单12222222222222222223333</div>
          <div class="fr head-append"><span>添加</span></div>
        </div>
        <div class="cost-content">
          <div class="cost-list-top fix">
            <div class="fl check"><input type="checkbox" />全选</div>
            <div class="fl name">| 费用类型名称</div>
            <div class="fl explain">| 使用说明</div>
            <div class="fl operate">| 操作</div>
          </div>
          <div class="cost-list-table fix">
            <div class="fl check"><input type="checkbox" /></div>
            <div class="fl name">机票</div>
            <div class="fl explain">北京-上海</div>
            <div class="fl operate">
              <span>删除</span><span>设置</span><span>移动</span>
            </div>
          </div>
          <div class="cost-list-table fix">
            <div class="fl check"><input type="checkbox" /></div>
            <div class="fl name">火车</div>
            <div class="fl explain">北京-上海</div>
            <div class="fl operate">
              <span>删除</span><span>设置</span><span>移动</span>
            </div>
          </div>
        </div>
      </div>
      <div class="fr-footer">
        <div class="ft-conp">
          已选中<span class="nub"> 5 </span>个费用类型，可进行批量操作：
          <span class="delete">删除</span>
          <span class="move">移动</span>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
 export default {
   data(){
     return{
       menu1:'一级菜单',
     }
   }
 }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  #app{
    width: 100%;
    height: 100%;
    background-color: #eeeeee!important;
  }
  body{
    height: 100%;
    width: 100%;
     background-color: #eeeeee!important;
   }
  .ell{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  fl{
    float: left;
  }
  fr{
    float: right;
  }
  .fix:after {
    display: table;
    content: '';
    clear: both;
  }
  .iconfont{
    cursor: pointer;
  }
  .fee-main{
    padding: 20px;
    width: 1160px;
    position: relative;
    background-color: #f1f1f1;
  }
.lf-content{
  background-color: #FFFFFF;
}
.tree{
  width: 400px;
  background-color: #FFFFFF;
  position: relative;
}
.tr-content{
  min-height: 600px;
  overflow: auto;
  .line{
    width: 380px;
    margin: auto;
    border-bottom: 1px #e7e5e2 dashed;
  }
}
  .tr-title{
    width: 360px;
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    margin: auto;
    span.add-title{
      float: right;
      margin: 18px 0 13px;
      height: 30px;
      line-height: 30px;
      background-color: #0078C9;
      width: 80px;
      border-radius: 14px;
      text-align: center;
      color: #fff;
      font-size: 12px;
      cursor: pointer;
    }
  }
  .tr-tree-list{
    width: 380px;
    font-size: 14px;
    line-height: 40px;
    margin: auto;
    .tr-list{
      color: #333333;
      position: relative;
      .text{
        max-width: 150px;
        cursor:pointer;
      }
      .showBtn{
        display: none;
      }
      .delBtn{
        color: #5EB4E7;
        margin-left: 5px;
        .icon-delete{
          font-size: 15px;
        }
      }
      .addBtn{
        position: absolute;
        right: 0;
        .add{
          width: 66px;
          height: 24px;
          line-height: 24px;
          border-radius: 10px;
          background-color: #5EB4E7;
          margin: 9px 0;
          text-align: center;
          color: #fff;
          font-size: 12px;
          cursor: pointer;
          margin-right: 10px;
        }
        .down{
          color: #5EB4E7;
          margin: 0 10px;
          .icon-unfold{
            font-size: 24px;
          }
        }
        .up{
          color: #5EB4E7;
          margin-left: 10px;
          .icon-fold{
            font-size: 24px;
          }
        }
      }
    }
  }
  .tr-list:hover .showBtn{
    display: block;
  }
  .ft-conp{
    line-height: 60px;
    border-top: 1px #e7e5e2 dashed;
    font-size: 12px;
    color: #5EB4E7;
    margin: 0 10px;
    span.nub{
      color: red;
      margin: 0 5px;
    }
    span.move{
      cursor: pointer;
      line-height: 28px;
      display: inline-block;
      border: 1px #5EB4E7 solid;
      padding: 0 20px;
      border-radius: 15px;
      float: right;
      margin: 15px 20px 0;
    }
    span.delete{
      cursor: pointer;
      color: red;
      margin-top: 15px;
      float: right;
      line-height: 28px;
      display: inline-block;
      border: 1px red solid;
      padding: 0 20px;
      border-radius: 15px;
    }
  }
  /*右边*/
  .fr-content{
    position: relative;
   background-color: #FFFFFF;
  }
  .cost-all-list{
    width: 680px;
    min-height: 600px;
    padding: 0 20px;
    position: relative;
  }
  .cost-head{
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    padding: 0 10px;
    border-bottom: 1px #e7e5e2 dashed;
    .head-nav{
      float: left;
      width: 150px;
      overflow:hidden;
      white-space:nowrap;
      text-overflow:ellipsis;
    }
    .head-append{
      float: right;
      margin: 18px 0 13px;
      height: 30px;
      line-height: 30px;
      background-color: #0078C9;
      width: 80px;
      border-radius: 14px;
      text-align: center;
      color: #fff;
      font-size: 12px;
      cursor: pointer;
    }
  }
  .cost-content{
    width: 100%;
    min-height: 480px;
    .cost-list-top{
      width: 640px;
      font-size: 12px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      .check{
        width: 60px;
        vertical-align: middle;
        input{
          margin-right: 4px;
          vertical-align: middle;
        }
      }
      .name{
        width: 120px;
        font-weight: bold;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
      }
      .explain{
        width: 280px;
        font-weight: bold;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
      }
      .operate{
        width: 180px;
        font-weight: bold;
      }
    }
    .cost-list-table{
      width: 640px;
      font-size: 12px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      .check{
        width: 60px;
        vertical-align: middle;
      }
      .name{
        width: 120px;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
      }
      .explain{
        width: 280px;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
      }
      .operate{
        width: 180px;
        span{
          margin: 0 10px;
          color: #5EB4E7;
          cursor: pointer;
        }
        /*span:hover{
          color: #1E9FFF;
        }*/
      }
    }
    .cost-list-table:hover{
      background-color: #eaffff;
    }
  }



</style>
